<template>
  <a-spin :spinning="loading"
          class="tree-container">
    <a-input-search @search="handleSearch"
                    v-if="treeVisible"
                    style="width:100%;"
                    :placeholder="$t('commonality.enter')" />
    <slot name="title"></slot>
    <a-tree v-if="visible"
            :load-data="onLoadData"
            :tree-data="data"
            :checkStrictly="true"
            v-model="checkedKeyList"
            @select="handleNodeClick"
            @check="handleTreeCheck"
            :checkable="checkable"></a-tree>
  </a-spin>
</template>

<script>

export default {
  name: 'tree',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['data', 'label', 'onLoadData', 'visible', 'checkable', 'treeVisible', 'value'],
  data () {
    return {
      usedSlots: ['button'], // 预留内部slots
      cardLoading: false,
      loading: false,
      treeDataSource: [],
      checkedKeyList: [],
      test:[],
      settings: {
      }
    }
  },
  created () {
       
  },
  watch: {
    value: {
      handler (newVal, oldVal) {
        this.checkedKeyList = newVal
      },
      immediate: true
    },
    defaultCheckedKeys (newVal, oldVal) {
      this.defaultCheckedKeyList = newVal
    },
  },
  methods: {
    handleSearch (value) {
      this.$emit('tree', value)
    },
    handleNodeClick (value, e) {
      this.$emit('handleNodeClick', value, e)
    },
    handleTreeCheck (value) {
      console.log(value)
      this.$emit('change', value.checked)
    }
  }
}
</script>

<style lang='less'>
.tree-container {
  .ant-tree {
    color: #666666;
  }

  .ant-card {
    color: #fff;
    background: transparent;
  }
  .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
    background-color: transparent;
    border-color: #d9d9d9;
  }
  // .ant-tree li .ant-tree-node-content-wrapper:hover {
  //   background-color: rgb(0, 116, 74);
  // }
  // .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  //   background-color: rgb(0, 116, 74);
  // }
}
</style>
